<div class="row">
    <no-agent *ngIf="!ee"></no-agent>

    <div *ngIf="ee && security">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Security Global Settings</div>
                        <div class="panel-body">
                            <form class="form-inline">

                                <div class="form-group">
                                    <label>Enabled </label>
                                    <input type="checkbox" [disabled]="!canEdit" name="enabled" [(ngModel)]="security.enabled">
                                </div>
                                <div class="form-group">
                                    <label>Debug </label>
                                    <input type="checkbox" [disabled]="!canEdit" name="debug" [(ngModel)]="security.debug">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav nav-tabs">
                        <li [ngClass]="{'active' : tab === 'auditing'}" (click)="tab = 'auditing'"><a href="javascript:void(0)"><span>Auditing</span></a></li>
                        <li [ngClass]="{'active' : tab === 'auth'}" (click)="tab = 'auth'"><a href="javascript:void(0)"><span>Authentication</span></a></li>
                        <li [ngClass]="{'active' : tab === 'ldap'}" (click)="tab = 'ldap'"><a href="javascript:void(0)"><span>LDAP
                                    Importer</span></a></li>
                        <li [ngClass]="{'active' : tab === 'misc'}" (click)="tab = 'misc'"><a href="javascript:void(0)"><span>Misc</span></a></li>
                    </ul>
                    <div class="tab-content row">
                        <auditing-management [security]="security" [canEdit]="canEdit" [databases]="databases" *ngIf="tab === 'auditing'"></auditing-management>
                        <authentication-management [security]="security" [canEdit]="canEdit" *ngIf="tab === 'auth'"></authentication-management>
                        <ldap-importer-management [security]="security" [canEdit]="canEdit" *ngIf="tab === 'ldap'"></ldap-importer-management>
                        <security-misc-management [security]="security" [canEdit]="canEdit" *ngIf="tab === 'misc'"></security-misc-management>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>